<template>
  <div class="w-full h-full bg-[#162331] px-5 overflow-auto">
    <el-tabs v-model="activeName">
      <el-tab-pane class="!text-white" label="巡检任务" name="task">
        <div
          v-for="item in taskList"
          :key="item.id"
          :class="{
            '!bg-[#007EBF]': item.id == activeTask,
          }"
          class="p-3 mb-4 bg-[#2e3946] rounded cursor-pointer"
          @click="selectActiveInspectionTas(item.id, item.mid, item.rid)"
        >
          <div class="flex justify-between text-sm mb-3">
            <span class="font-bold text-white">{{ item.name }}</span>
            <span class="font-bold text-[#20FEA5]">
              {{ inspectionStatusFormat(item.status) }}
            </span>
          </div>
          <div class="flex justify-between text-xs text-gray-300">
            <span>安保机器人01</span>
            <span>路线A</span>
            <span>{{ item.startTime }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

interface TaskItem {
  id: number;
  mid: number;
  rid: number;
  name: string;
  status: string;
  startTime: string;
}

interface Props {
  taskList: TaskItem[];
}

const activeName = ref<string>("task");

defineProps<Props>();

const activeTask = ref<number>(0);

const emit = defineEmits<{
  (e: "select", id: number, mid: number, rid: number): void;
}>();

function selectActiveInspectionTas(id: number, mid: number, rid: number): void {
  activeTask.value = id;
  emit("select", id, mid, rid);
}

function inspectionStatusFormat(value: string): string {
  switch (value) {
    case "start":
      return "开始";
    case "end":
      return "结束";
    case "download":
      return "下载中";
    default:
      return "未开始";
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap) {
  &::after {
    height: 0;
  }
}
:deep(.el-tabs__item) {
  color: #fff;
  font-weight: bold;
}
:deep(.el-tabs__active-bar) {
  background-color: #007ebf;
}
</style>
